<!--
 * @LastEditTime : 2022-11-03 16:23:25
 * @FilePath     : /pyy/src/views/equipment/detail/components/detailed.vue
 * @Description  : 设备计量 > 设备计量校准详情 > 明细表
-->
<template>
  <div class="detailed">
    <div class="header">
      {{ detail.bclsbmc }}
      <van-button size="mini" class="see-enclosure" v-show="details.fkzt != '未付款'" @click="goToEnclosure(detail.zslb,details.wtdh,details.ywdh,indexNum)">
        查看证书
      </van-button>
    </div>
    <div class="contanier">
      <div
        class="info-item"
        v-for="(item, index) in getInfoList()"
        :key="'info-item_' + index"
      >
        <span class="info-item_label">{{ item.label }}：</span>
        <span class="info-item_value">{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Detailed",
  components: {},
  props: {
    // 表单录入数据
    detail: {
      require: true,
      type: Object,
      default: () => ({
        id: "",
        equipmentName: "",
        equipmentCode: "",
        specification: "",
        category: "",
        num: "",
        pointName: "",
        certificationUnit: "",
        isAdjustment: "",
        isRequire: "",
        isSeal: "",
        // isUrgent: "",
      }),
    },
    details:{
      type: Object,
    },
    indexNum:{
      type: Number,
    }
  },
  mounted() {


  },
  methods: {
    /**
     * 获取 展示信息列表
     * @return {Array<{label:"字段名称",value:"字段值"}>} 生成的展示结果
     */
    getInfoList() {
      const enumerate = {
        bh: "编号",
        xhgg: "型号规格",
        lb: "类别",
        ypsl: "数量",
        cldmc: "测量点名称",
        zsdw: "证书单位",
        sfxtz: "是否需要调整",
        sfxwx: "是否需要修理",
        sfxfy: "是否需要封印",
        // isUrgent: "是否需要加急",
      };

      return Object.keys(enumerate).map((key) => ({
        label: enumerate[key],
        value: this.detail[key],
      }));
    },

    /**
     * 前往 查看证书 界面
     */
    goToEnclosure(id,ywdh,wtdh,indexNum) {

      this.$router.push({
        name: "EquipmentDetailEnclosure",
        query: { 
          id:id,
          ywdh:ywdh,
          wtdh:wtdh,
          dataId: this.$route.query.id,
          indexNum
         },
      });
    },


  },
};
</script>

<style lang="less" scoped>
.detailed {
  width: 100%;
  height: max-content;
  font-family: "Inter";
  font-style: normal;
  font-size: 16px;
  line-height: 19px;
  margin-top: 8px;
  background: #ffffff;
  box-sizing: border-box;
  padding: 16px;
  font-family: "Inter";

  .header {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    color: #393939;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .see-enclosure {
      background: rgba(14, 134, 209, 0.2);
      border: 1px solid #0e86d1;
      border-radius: 5px;
      padding: 2px 6px;

      .van-button__content {
        span.van-button__text {
          font-family: "ABeeZee";
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          text-align: center;
          letter-spacing: -0.24px;
          color: #0e86d1;
        }
      }
    }
  }

  .contanier {
    .info-item {
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 28px;
      color: #999999;
      display: flex;

      .info-item_label {
        width: max-content;
        white-space: nowrap;
      }

      .info-item_value {
        width: 0;
        flex: 1;
        color: #393939;
      }
    }
  }
}
</style>
